<template>
<div>测试接口请求页面

            <div>
                <el-row>
                    <el-button>默认按钮</el-button>
                    <el-button type="primary"  @click="torequest">请求接口,参数为对象</el-button>
                    <el-button type="success" @click="paramByJson">请求接口，参数为json</el-button>
                    <el-button type="info" @click="apiTest">测试封装axios请求</el-button>
                    <el-button type="warning">警告按钮</el-button>
                    <el-button type="danger" >危险按钮</el-button>
                </el-row>
            </div>

            <div class="login-container">
              <div  class="login-box">
                <el-form ref="form" :model="form"  label-width="80px">
                    
                    <el-form-item label="账号" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                  
                    <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                  
                    </el-form-item>

                    <el-upload
                      class="avatar-uploader"
                      action="http://192.168.0.66:9000/common/uploadFile"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                     <el-button type="primary" @click="upload">提交</el-button>
                     <el-button type="primary" @click="upload1">提交1</el-button>
                     <el-button type="primary" @click="upload2">提交2</el-button>
                </el-form>
              </div>
          </div>
</div>



</template>

<script>
//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）
//例如： import <<组件名称>> from '<<组件路径>>' ; 

export default {
//import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  form:{
          name:'',
          password:'',
          phone: '',     
        },
        imageUrl: '',
        fileUrl:'',

};
},
//计算属性 类似于data概念
computed: {},
//监控data 中的数据变化
watch: {},
//方法集合
methods: {

    // 后台接口为 
    torequest(){
      this.axios({
      method: 'post',
      url: "http://localhost:9000/test/paramByJson",
      params: {
        name: '小明',
        age: 18,

      },
        data: {
        name: '小明',
        age: 18,

      }

    }).then(response => {
      this.$message({
                  message: response.data.msg,
                  type: 'success'
                });
      console.log('响应结果：'+response.data.msg);
    });
    // 后台接口为@RequestBody 接收json格式参数
    },
     paramByJson(){
      this.axios({
      method: 'post',
      url: "http://localhost:9000/test/paramByJson",
      data: {
        name: '小明',
        age: 18,

      }
    }).then(response => {
      this.$message({
                  message: response.data.msg,
                  type: 'success'
                });
      console.log('响应结果：'+response.data.msg);
    });
    },
    apiTest(){
      
      this.$http.get('/test/apiTest',{"id":1},function(res){  // get 请求 还带了个参数过去
             this.$message({
                  message: res.data.data,
                  type: 'success'
                });
        })
    },
     handleAvatarSuccess(res, file) {
        console.log(res)
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log("服务器返回文件路径:"+res.data)
        this.fileUrl = res.data;
        console.log("文件路径:"+this.fileUrl)
        
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    upload(){
      console.log("开始文件上传")
      let data = {
        name: this.form.name,
        password: this.form.password,
        phone: this.form.phone, 
        fileUrl: this.fileUrl,
      }

    this.$http.post("/user/submitResource",data,(res)=>{

      console.log(res)
    })


    },
      upload1(){
      console.log("开始文件上传")
      let data = {
        name: this.form.name,
        password: this.form.password,
        phone: this.form.phone, 
        fileUrl: this.fileUrl,
      }
       let formData = new FormData()
       formData.append('name', this.form.name)
       formData.append('password', this.form.password)
       formData.append('nphoneame', this.form.phone)
       formData.append('nfileUrl', this.fileUrl)

    this.$http.postByParam("/user/submitResource1",data,(res)=>{
      console.log(res)
    })


    },
     upload2(){
      console.log("开始文件上传")
      let data = {
        name: this.form.name,
        password: this.form.password,
        phone: this.form.phone, 
        fileUrl: this.fileUrl,
      }
    this.$http.post("/user/submitResource2",data,(res)=>{
      console.log(res)
    })


    }



      

},


//生命周期 -创建完成 （可以访问当前this 实例）
created() {

},
//生命周期-挂载完成（可以访问DOM 元素）
mounted() {

},
beforeCreate() {}, //生命周期 -创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 -更新之后
beforeDestroy() {}, //声明周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
activated() {}, // 如果页面有keep-alive 缓存功能 这个函数会触发 
}
</script>
<style scoped>
/*@import url();引入公共css类*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .login-container{
    width: 500px;
    height: 500px;
    text-align: center;
    margin-left: 500px;
    margin-top: 10px;
    border: 2px solid;

  }

</style>